renderUsername();

checkLogin();

registerLoginout();

function renderOverview(overview) {
	Object.keys(overview).forEach((key) => {
		document.querySelector(`.${key}`).innerHTML = overview[key];
	});
}

function renderYearSalary(year) {
	//line
	const line = document.querySelector("#line");
	const myChart = echarts.init(line);
	const option = {
		//设置标题
		title: {
			text: "2023薪资走势",
			left: "12",
			top: "15",
		},
		// 网格
		grid: {
			top: "20%",
		},
		yAxis: {
			//连续数据
			type: "value",
			splitLine: {
				type: "dotted",
			},
		},
		xAxis: {
			//类目轴
			type: "category",
			axisLine: {
				lineStyle: {
					color: "#ccc",
					type: "dashed",
				},
			},
			data: year.map((v) => v.month),
		},
		series: [
			{
				data: year.map((v) => v.salary),
				//标记的大小
				symbolSize: 10,
				lineStyle: {
					width: 8,
					color: {
						type: "linear",
						//起点
						x: 0,
						y: 0,
						// 结束点
						x2: 1,
						y2: 0,
						colorStops: [
							{ offset: 0, color: "#3d5f66" },
							{ offset: 1, color: "#3d5f86" },
						],
						global: false,
					},
				},
				type: "line",
				smooth: true,
				// 区域填充样式
				areaStyle: {
					color: {
						type: "linear",
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{ offset: 0, color: "blue" },
							{ offset: 1, color: "red" },
						],
						global: false,
					},
				},
			},
		],
		//提示组件t
		tooltip: {
			show: true,
			trigger: "",
		},
	};

	myChart.setOption(option);
}

function renderSalary(salaryData) {
	const salary = document.querySelector("#salary");
	const myChart = echarts.init(salary);
	const option = {
		title: {
			text: "班级薪资分布",
			left: "10",
			top: "15",
		},
		tooltip: {
			trigger: "item",
		},
		legend: {
			bottom: "5%",
			left: "center",
		},
		series: [
			{
				name: "班级薪资分布", //tooltip会用到
				type: "pie", //类型
				radius: ["55%", "70%"], //圆角 内半径 外半径
				itemStyle: {
					borderColor: "#dfff",
					borderRadius: 15,
					borderWidth: 5,
					// shadowBlur:10,
					// shadowOffsetX:0,
					// shadowOffsetY:0,
					// shadowColor:"rgba(0,0,0,0.5)"
				}, //区域样式
				emptasis: {
					label: {
						show: true,
						fontSize: 100,
						fontWeight: "blod",
					},
				}, //高亮样式
				label: {
					show: true,
					position: "center",
				}, //说明文本
				labelLine: {
					show: true,
				}, //文本引导线
				avoidLabelOverlap: false, //避免重叠
				data: salaryData.map((v) => {
					return {
						value: v.g_count + v.b_count,
						name: v.label,
					};
				}), //数据
			},
		],
		color: ["#008c8c", "#88c5dc", "#77de", "#de74ff"], //调色盘
	};
	myChart.setOption(option);
}

function renderGroupSalary(groupData) {
	const dom = document.querySelector("#lines");
	const myChart = echarts.init(dom);

	const option = {
		tooltip: {},
		grid: {
			left: 70,
			top: 30,
			right: 30,
			bottom: 50,
		},
		xAxis: {
			type: "category",
			data: groupData[1].map((v) => v.name),
			axisLine: {
				lineStyle: {
					color: "#ccc",
					type: "dashed",
				},
			},
			axisLabel: {
				color: "#999",
			},
		},
		yAxis: {
			type: "value",
			splitLine: {
				lineStyle: {
					color: "#ccc",
					type: "dashed",
				},
			},
		},
		series: [
			{
				name: "期望薪资",
				data: groupData[1].map((v) => v.hope_salary),
				type: "bar",
				itemStyle: {
					color: {
						type: "linear",
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{ offset: 0, color: "#008c8c" },
							{ offset: 1, color: "#88c5dc" },
						],
						global: false,
					},
				},
			},
			{
				name: "期望薪资",
				data: groupData[1].map((v) => v.salary),
				type: "bar",
				itemStyle: {
					color: {
						type: "linear",
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						colorStops: [
							{ offset: 0, color: "#008cdc" },
							{ offset: 1, color: "#88dc" },
						],
						global: false,
					},
				},
			},
		],
	};
	myChart.setOption(option);
}

// 渲染男女薪资分布函数
function renderGenderSalary(salaryData) {
	// console.log(salaryData)
	// 初始化实例
	const dom = document.querySelector("#gender");
	const myChart = echarts.init(dom);
	// 定义选项和数据
	const option = {
		tooltip: {
			trigger: "item",
		},
		// 颜色
		color: ["#fda224", "#5097ff", "#3abcfa", "#34d39a"],
		// 标题，通过数组设置多个
		title: [
			{
				text: "男女薪资分布",
				left: 10,
				top: 10,
				// text属性的样式
				textStyle: {
					// 文字的大小
					fontSize: 16,
				},
			},
			{
				text: "男生",
				left: "50%",
				top: "45%",
				textStyle: {
					fontSize: 12,
				},
				textAlign: "center",
			},
			{
				text: "女生",
				left: "50%",
				top: "85%",
				textStyle: {
					fontSize: 12,
				},
				textAlign: "center",
			},
		],
		series: [
			{
				type: "pie",
				radius: ["20%", "30%"],
				// 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
				center: ["50%", "30%"],
				data: salaryData.map((v) => {
					return { value: v.b_count, name: v.label };
				}),
			},
			{
				type: "pie",
				radius: ["20%", "30%"],
				center: ["50%", "70%"],
				data: salaryData.map((v) => {
					return { value: v.g_count, name: v.label };
				}),
			},
		],
	};
	// 基于选项和数据绘制图表
	myChart.setOption(option);
}

// 渲染籍贯分布
function renderProvince(provinceData) {
	// console.log(provinceData)
	const dom = document.querySelector("#map");
	const myEchart = echarts.init(dom);
	const dataList = [
		{ name: "南海诸岛", value: 0 },
		{ name: "北京", value: 0 },
		{ name: "天津", value: 0 },
		{ name: "上海", value: 0 },
		{ name: "重庆", value: 0 },
		{ name: "河北", value: 0 },
		{ name: "河南", value: 0 },
		{ name: "云南", value: 0 },
		{ name: "辽宁", value: 0 },
		{ name: "黑龙江", value: 0 },
		{ name: "湖南", value: 0 },
		{ name: "安徽", value: 0 },
		{ name: "山东", value: 0 },
		{ name: "新疆", value: 0 },
		{ name: "黑龙江", value: 0 },
		{ name: "浙江", value: 0 },
		{ name: "江西", value: 0 },
		{ name: "湖北", value: 0 },
		{ name: "广西", value: 0 },
		{ name: "甘肃", value: 0 },
		{ name: "山西", value: 0 },
		{ name: "内蒙古", value: 0 },
		{ name: "陕西", value: 0 },
		{ name: "吉林", value: 0 },
		{ name: "福建", value: 0 },
		{ name: "贵州", value: 0 },
		{ name: "广东", value: 0 },
		{ name: "青海", value: 0 },
		{ name: "西藏", value: 0 },
		{ name: "四川", value: 0 },
		{ name: "宁夏", value: 0 },
		{ name: "海南", value: 0 },
		{ name: "台湾", value: 0 },
		{ name: "香港", value: 0 },
		{ name: "澳门", value: 0 },
	];

	// 筛选数据
	dataList.forEach((item) => {
		const res = provinceData.find((v) => {
			return v.name.includes(item.name);
		});
		// console.log(res)
		// 数据赋值
		if (res !== undefined) {
			item.value = res.value;
		}
	});
	// console.log(dataList)

	const option = {
		title: {
			text: "籍贯分布",
			top: 10,
			left: 10,
			textStyle: {
				fontSize: 16,
			},
		},
		tooltip: {
			trigger: "item",
			formatter: "{b}: {c} 位学员",
			borderColor: "transparent",
			backgroundColor: "rgba(0,0,0,0.5)",
			textStyle: {
				color: "#fff",
			},
		},
		visualMap: {
			min: 0,
			max: 6,
			left: "left",
			bottom: "20",
			text: ["6", "0"],
			inRange: {
				color: ["#ffffff", "yellowgreen"],
			},
			show: true,
			left: 40,
		},
		geo: {
			map: "china",
			roam: false,
			zoom: 1.0,
			label: {
				normal: {
					show: true,
					fontSize: "10",
					color: "rgba(0,0,0,0.7)",
				},
			},
			itemStyle: {
				normal: {
					borderColor: "rgba(0, 0, 0, 0.2)",
					color: "#e0ffff",
				},
				emphasis: {
					areaColor: "#34D39A",
					shadowOffsetX: 0,
					shadowOffsetY: 0,
					shadowBlur: 20,
					borderWidth: 0,
					shadowColor: "rgba(0, 0, 0, 0.5)",
				},
			},
		},
		series: [
			{
				name: "籍贯分布",
				type: "map",
				geoIndex: 0,
				data: dataList,
			},
		],
	};
	myEchart.setOption(option);
}

// git clone -b dev --single-branch git@gitee.com:iwenShuang/0627-ha-information-21-02.git
// git clone -b dev --single-branch git@gitee.com:darkTchr/0627-ha-information-21-h02.git
//首页数据大屏数据接入
async function getData() {
	const res = await axios({
		url: "/dashboard",
	});

	const { overview, year, salaryData, groupData, provinceData } = res.data;

	renderOverview(overview);

	renderYearSalary(year);

	renderSalary(salaryData);

	renderGroupSalary(groupData);

    renderGenderSalary(salaryData);

	renderProvince(provinceData);

}

getData();
